<template>
  <div>
    <TablePageContainer>
      <template #header>
        <el-form :model="table.params" :inline="true">
          <el-form-item label="用户账号">
            <el-input v-model="table.params.username" placeholder="请输入用户账号" />
          </el-form-item>
          <el-form-item label="用户姓名">
            <el-input v-model="table.params.nickName" placeholder="请输入用户姓名" />
          </el-form-item>
          <el-form-item label="操作模块">
            <el-input v-model="table.params.module" placeholder="请输入操作模块" />
          </el-form-item>
          <el-form-item label="操作动作">
            <el-input v-model="table.params.action" placeholder="请输入操作动作" />
          </el-form-item>
          <el-form-item label="请求地址">
            <el-input v-model="table.params.requestUrl" placeholder="请输入请求地址" />
          </el-form-item>
          <el-form-item label="操作时间">
            <el-date-picker
              v-model="table.params.operateTimeTmp"
              type="daterange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList">查询</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template #operation>
        <el-button type="danger" :disabled="table.selectionRows.length <= 0" @click="handleDel">删除</el-button>
        <el-button type="danger" @click="handleClear()">清空</el-button>
      </template>
      <template #table>
        <el-table v-loading="table.loading" class="w_100" :data="table.data" border stripe @selection-change="handleTableSelectionChange">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column prop="username" label="用户账号" align="center" />
          <el-table-column prop="nickName" label="用户姓名" align="center" />
          <el-table-column prop="module" label="操作模块" align="center" />
          <el-table-column prop="action" label="操作动作" align="center" />
          <el-table-column prop="ipAddress" label="登录地址" align="center" />
          <el-table-column prop="geoLocation" label="登录地点" align="center" />
          <el-table-column prop="deviceInfo" label="登录设备" align="center" />
          <el-table-column prop="browserInfo" label="浏览器" align="center" />
          <el-table-column label="操作时间" align="center" sortable>
            <template slot-scope="scope">
              {{ parseTime(scope.row.operateTime) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
              <el-button type="text" icon="fa fa-eye" @click="handleShowDetail(scope.row)">详情</el-button>
              <el-button type="text" icon="fa fa-trash-can" @click="handleDel(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template #page>
        <Pagination :total.sync="table.total" :page.sync="table.params.pageNum" :limit.sync="table.params.pageSize" @pagination="getList" />
      </template>
    </TablePageContainer>

    <Detail v-if="detailDialog.visible" :id="detailDialog.id" :visible.sync="detailDialog.visible" @handleClose="handleCloneDetailDialog" />
  </div>
</template>

<script>
import _ from 'lodash'
import { parseTime } from '@/utils'
import { clear, del, getPage } from '@/api/system/logs/operateLog'

export default {
  name: 'OperateLog',
  components: {
    Detail: () => import('@/views/system/logs/operate/components/Detail.vue'),
    TablePageContainer: () => import('@/components/TablePageContainer'),
    Pagination: () => import('@/components/Pagination')
  },
  data() {
    return {
      table: {
        params: {
          extra: {
            startOperateTime: undefined,
            endOperateTime: undefined
          },
          operateTimeTmp: undefined,
          username: '',
          nickName: '',
          module: '',
          action: '',
          requestUrl: '',
          pageNum: 1,
          pageSize: 10
        },
        defaultParams: undefined,
        loading: false,
        data: [],
        total: 0,
        selectionRows: []
      },
      detailDialog: {
        visible: false,
        id: undefined
      }
    }
  },
  created() {
    this.table.defaultParams = _.cloneDeep(this.table.params)
    this.getList()
  },
  methods: {
    parseTime,
    getList() {
      this.table.loading = true
      if (this.table.params.operateTimeTmp) {
        this.table.params.extra.startOperateTime = this.table.params.operateTimeTmp[0]
        this.table.params.extra.endOperateTime = this.table.params.operateTimeTmp[1]
      }
      getPage(this.table.params).then(res => {
        this.table.data = res.data.records
        this.table.total = res.data.total
        this.table.loading = false
      })
    },
    handleDel(row) {
      this.$confirm('此操作将永久操作日志, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ids = []
        if (this.table.selectionRows.length > 0) {
          this.table.selectionRows.forEach(item => {
            ids.push(item.id)
          })
        }

        if (row.id) {
          ids.push(row.id)
        }

        if (ids.length <= 0) {
          return
        }

        del(ids).then(() => {
          this.$message.success('删除成功')
          this.getList()
        })
      })
    },
    handleClear() {
      this.$confirm('此操作将清空全部操作日志, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        clear().then(() => {
          this.$message.success('清空成功')
          this.getList()
        })
      })
    },
    handleShowDetail(row) {
      this.handleCloneDetailDialog(true)
      this.detailDialog.id = row.id
    },
    handleCloneDetailDialog(v) {
      this.detailDialog.id = undefined
      this.detailDialog.visible = v
    },
    handleTableSelectionChange(val) {
      this.table.selectionRows = val
    },
    handleReset() {
      this.table.params = _.cloneDeep(this.table.defaultParams)
      this.getList()
    }
  }
}
</script>

<style scoped lang="scss">

</style>
